<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>选课题</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/layer/css/layui.css}"  media="all"/>
    <link rel="stylesheet" th:href="@{/css/topicList.css}"/>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}" ></script>
    <script th:src="@{/layer/layui.js}" charset="utf-8"></script>
    <script th:href="@{/js/common/inputTool.js}"></script>
    <style>

    </style>
</head>
<body>

<th:block th:if="${#lists.size(topicList) == 0}" >
    <div class="none-title">
        暂无课题，请等待教师发布课题<br/>
    </div>
</th:block>

<div>
    <input type="hidden" th:value="${pageNum}-1" name="page"/>
    <input onfocus="searchPage()" type="text" class="searchInput" name="name" title="课题名字" />
    <button class="btn btn-primary">搜索</button>
</div>

<div th:each="topic:${topicList}">
    <div class="layui-collapse">
        <div class="layui-colla-item ">
            <h2 class="layui-colla-title" th:text="${topic.name}"></h2>
            <div class="layui-colla-content ">
                <div th:utext="${topic.attention}" class="list-item"></div><br/>
                <button class="btn btn-primary item-button" th:onclick="'javascript:selectTopic(\''+${topic.topicId}+'\');'">选择课题</button>
                <!--<a th:href="@{/teacher/editTopic/{topic} (topic=${topic.topicId})}"><button class="btn btn-primary">修改课题</button></a>-->
                <!--<button class="btn btn-warning" onclick="editStudent()">修改已选题学生</button>-->
                <!--<button class="btn btn-danger" th:onclick="'javascript:deleteTopic(\''+${topic.topicId}+'\');'">删除课题</button>-->
            </div>
        </div>
    </div>
</div>

<hr/>
<div id="pageBar">
    <a th:href="@{/student/ChooseTopic}"><button>首页</button></a>
    <a th:href="@{/student/ChooseTopic/{id} (id=${pageNum}-2)}"><button>上一页</button></a>
    <span th:text="'第 '+${pageNum}+' 页'"></span>
    <th:block th:if="${pageNum lt pageTotal}" >
        <a th:href="@{/student/ChooseTopic/{id} (id=${pageNum})}"><button>下一页</button></a>
    </th:block>
    <a th:href="@{/student/ChooseTopic/{id} (id=${pageTotal}-1)}"><button>尾页</button></a>
    <span th:text="'共 '+${pageTotal}+' 页'"></span>
</div>



<script>

    layui.use(['element', 'layer'], function(){
    });

    $("#pageBar button").addClass('btn btn-primary')

    function selectTopic(topicId) {
        layer.open({
            type: 1,
            title: '选择该课题',
            area: ['320px', '220px'],
            resize: false,
            content: '<div><textarea name="comment" id="submitComment" style="width: 300px;height: 120px;border: none;margin: 1px 0 5px 10px;" placeholder="请输入你想发送的消息"/><br/>' +
            '<button type="button" onclick="select('+topicId+')" class="btn btn-success" style="margin-left: 32%;">确定选择</button></div>'
        })
    }
    function select(topicId) {
        layer.closeAll('page')
        var coment= $("#submitComment").val()
        $.get('/myth/student/ChooseTopic/s/'+topicId+'?comment='+coment, function (data) {
            if('Fail' === data){
                layer.msg('选题失败,请刷新页面重试')
            }else if('Already' === data){
                layer.msg('你已经选了一个课题')
            }else{
                layer.msg('选题成功，请等待对应教师回复')
            }
        })
    }
    function searchPage() {
        window.location.href = "/myth/student/SearchTopic";
    }
</script>
</body>
</html>